import { useEffect, useState } from "react";
// 所有hooks函数都是以use开头
// 自定义hooks和普通函数区别：本质没什么区别，都是逻辑复用。区别在于自定义hooks用了react hooks的函数
function usePosition() {
    const [position, setPosition] = useState({ x: 0, y: 0 });
    useEffect(() => {
        const handleMousemove = (e) => {
            setPosition({ x: e.pageX, y: e.pageY });
        };
        window.addEventListener("mousemove", handleMousemove);
        return () => {
            window.removeEventListener("mousemove", handleMousemove);
        };
    }, []);
    return position;
}
function App() {
    const position = usePosition();
    return (
        <div>
            <p>
                坐标位置x: {position.x} ,坐标位置y: {position.y}
            </p>
        </div>
    );
}

// function App1() {
//     const position = usePosition();
//     return (
//         <div>
//             <p>
//                 页面坐标位置x: {position.x} ,页面坐标位置y: {position.y}
//             </p>
//         </div>
//     );
// }

export default App;
